import './reduxTodoList.css';
import React from 'react';
import { connect } from 'react-redux';
import { INPUT_CHANGE, ADD_ITEM, DELE_ITEM } from "@/store/actionTypes";

const ReduxTodoList = (props) => {
  console.log(props);
  let {
    inputVal,
    iptChangeCallback,
    list,
    submitFn,
    deleItemFn,
  } = props;

  return (<div>
    <div>
      <input type="text" value={inputVal} onChange={(e) => iptChangeCallback(e)} />
      <button onClick={submitFn}>提交</button>
    </div>
    <ul>
      {
        list.map((item, index) => {
          return <li key={index} onClick={index => deleItemFn(index)}>{item}</li>
        })
      }
    </ul>
  </div>)
}

const mapStateToProps = (totalState) => {
  let state  = totalState.inputReducer;
  return {
    inputVal:state.inputVal,
    list:state.list
  }
}

const dispatchToProps = (dispatch) => {
  return {
    submitFn:() => {
      dispatch({ type: ADD_ITEM })
    },
    iptChangeCallback:(e) => {
      let action = {
        type:INPUT_CHANGE,
        value:e.target.value
      };
      dispatch(action);
    },
    deleItemFn:() => {
      dispatch({ type: DELE_ITEM })
    }
  }
}

export default connect(mapStateToProps,dispatchToProps)(ReduxTodoList);
